<template>
  <div class="todo_wrap">
    <h1>今日清单</h1>
    <div>
      <input v-model="txt" placeholder="添加任务" type="text" />
      <button @click="add">添加</button>
    </div>
    <div class="list">
      <div class="list_one" v-for="(item, index) in todoList" :key="index">
        <input
          @change="itemChange(item.id)"
          :checked="item.isDone"
          type="checkbox"
        />
        <span>{{ item.text }}</span>
        <span @click="del(item.id)">×</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, watch, reactive, computed } from 'vue'

import addTodo from './hooks/addTodo'
import delTodo from './hooks/delTodo'
interface Itodo {
  id: number
  text: string
  isDone: boolean
}
export default {
  setup (props: any) {
    let todoList = ref<Array<Itodo>>([])
    var obj = JSON.parse(localStorage.todo)
    todoList.value = obj._value
    // 添加的功能
    let { txt, add, count } = addTodo()
    // count 新添加标识
    watch(count, () => {
      console.log(88888888)
      var obj = JSON.parse(localStorage.todo)
      todoList.value = obj._value
    })
    //删除模块
    let { del, dcount, itemChange } = delTodo()
    watch(dcount, () => {
      console.log(88888888)
      var obj = JSON.parse(localStorage.todo)
      todoList.value = obj._value
    })
    return {
      todoList,
      itemChange,
      del,
      txt,
      add
    }
  }
}
</script>
<style lang="less">
.todo_wrap {
  width: 70%;
  margin: 0 auto;
}
.list {
  width: 70%;
  margin: 20px 0;
}
.list_one {
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
}
.list_one span:nth-child(2) {
  font-size: 40px;
  cursor: pointer;
}
</style>
